<template>
  <div class="login-container">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
      <div class="title-container">
        <h3 v-if="loginForm.identity === 'company'" class="title">
          供应商登录
        </h3>
        <h3 v-if="loginForm.identity === 'admin'" class="title">
          系统管理员登录
        </h3>
        <h3 v-if="loginForm.identity === 'professional'" class="title">
          专家登录
        </h3>
        <h3 v-if="loginForm.identity === 'brand'" class="title">
          品牌合作商登录
        </h3>
        <h3 v-if="loginForm.identity === ''" class="title">登录</h3>
      </div>
      <el-form-item style="display: flex" prop="identity">
        <span class="svg-container"> 类型： </span>
        <el-select
          :fit-input-width="true"
          v-model="loginForm.identity"
          placeholder="选择账户类型"
        >
          <el-option
            v-for="item in type"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item prop="loginCode">
        <span class="svg-container"> 账号： </span>
        <el-input
          v-model="loginForm.loginCode"
          placeholder="loginCode"
          type="text"
        />
      </el-form-item>

      <el-form-item prop="loginPwd" class="flex-s">
        <span class="svg-container"> 密码： </span>
        <el-input v-model="loginForm.loginPwd" type="password" />
      </el-form-item>
      <!-- <el-form-item prop="kaptchaValue" class="flex-s kaptchaValue">
        <span class="svg-container">验证码： </span>
        <el-input v-model="loginForm.kaptchaValue" />
        <div class="captcha">
          <img :src="base64Captcha" alt="" @click="getCode" />
        </div>
      </el-form-item> -->
      <el-button
        :loading="loading"
        type="primary"
        style="width: 100%; margin-bottom: 30px"
        @click.prevent="handleLogin"
        >登录</el-button
      >
    </el-form>
  </div>
</template>

<script>
import Axios from "axios";
import { Login, GraVerCode } from "@/api/login";
import store from "@/store";
import { setToken } from "@/utils/storage";
import md5 from "js-md5";
export default {
  data() {
    return {
      loginForm: {
        loginCode: process.env.NODE_ENV == "development" ? "admin" : "",
        loginPwd: process.env.NODE_ENV == "development" ? "111111" : "",
        identity: "",
        // kaptchaValue: "",
        // kaptchaCode: "",
      },
      type: [
        { name: "系统管理员", value: "admin" },
        { name: "供应商", value: "company" },
        { name: "品牌", value: "brand" },
        { name: "专家", value: "professional" },
      ],
      loginRules: {
        loginCode: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        loginPwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        identity: [
          {
            required: true,
            message: "请选择登录类型",
            trigger: "change",
          },
        ],
        // kaptchaValue: [
        //   {
        //     required: true,
        //     message: "请输入图形验证码",
        //     trigger: "blur",
        //   },
        // ],
      },
      loading: false,
      redirect: undefined,
      base64Captcha: undefined,
    };
  },
  // created() {
  //   this.getCode();
  // },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  methods: {
    // getCode() {
    //   const baseURL = process.env.VUE_APP_BASE_API;

    //   this.loginForm.kaptchaCode = Date.parse(new Date());
    //   Axios.get(`${baseURL}/kaptcha`, {
    //     responseType: "arraybuffer",
    //     headers: {
    //       "X-Request-Plat": "Web",
    //     },
    //   })
    //     .then((response) => {
    //       return (
    //         "data:image/png;base64," +
    //         btoa(
    //           new Uint8Array(response.data).reduce(
    //             (data, byte) => data + String.fromCharCode(byte),
    //             ""
    //           )
    //         )
    //       );
    //     })
    //     .then((res) => {
    //       this.base64Captcha = res;
    //     });
    // },

    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          const loginForm = {
            ...this.loginForm,
            // loginPwd: md5(this.loginForm.loginPwd),
          };
          Login(loginForm)
            .then((res) => {
              setToken(res.data.token);
              if (loginForm.identity !== "admin") {
                localStorage.setItem("check", 0);
              } else {
                localStorage.setItem("check", 1);
              }
              store.dispatch("user/userInfo", res.data);
              localStorage.setItem("loginId", res.data?.id || null);
              localStorage.setItem("identity", res.data?.identity || null);
              if (res.data.identity === "company") {
                this.$router.push("/gongyingshang/detail");
              } else if (res.data.identity === "professional") {
                this.$router.push("/zhuanjia/detail");
              } else if (res.data.identity === "brand") {
                this.$router.push("/pinpai/detail");
              } else {
                this.$router.push("/gongzuotai");
              }

              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  height: 100%;
  overflow: hidden;
  .el-input__wrapper {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
  }
  .el-input {
    display: inline-block;
    height: 47px;
    width: 70%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 60px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-loginPwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .captcha {
    position: absolute;
    right: 0;
    top: 0;
    width: 160px;
    height: 52px;
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      cursor: pointer;
      vertical-align: middle;
    }
  }

  :deep(.el-select) {
    flex: 1;
  }
  :deep(.el-input__wrapper) {
    width: 100%;
    box-shadow: none;
    border: none;
  }
}
</style>
